<template>
	<div>
		<header>
			<ul>
				<li @click="nav_click('business')" >业务总览</li>
				<li @click="nav_click('money')" >收支总览</li>
				<li @click="nav_click('achievement')" :class='{isActive: true}'>绩效总览</li>
			</ul>
		</header>
		<div class="detail_container" :style="{height: heightClient}" v-if="a">
			<div class="side_choose" >
				<div class="choose_bar">
					<div class="bar" @click="barClick('out')"  @mouseenter = "barMouseEnter('out')" @mouseleave = "barMouseLeave('out')"
					:class="{active: outShow}">
						<div class="bar-title">绩效总额(本月)</div>
						<div class="text">
							{{perTotalNum}}<br>
							<span>占比：{{perTotalRate}}</span>
						</div>
					</div>
					<div class="bar" @click="barClick('average')"  @mouseenter = "barMouseEnter('average')" @mouseleave = "barMouseLeave('average')" :class="{active: averageShow}">	
						<div class="bar-title">奖励型绩效(本月)</div>
						<div class="text">{{perReward}}</div>
					</div>
					<div class="bar" @click="barClick('use')"  @mouseenter = "barMouseEnter('use')" @mouseleave = "barMouseLeave('use')" :class="{active: useShow}">
						<div class="bar-title">医联体绩效(本月)</div>
						<div class="text">{{perUnit}}</div>
					</div>
					<div class="bar" @click="barClick('last')"  @mouseenter = "barMouseEnter('last')" @mouseleave = "barMouseLeave('last')" :class="{active: lastShow}">
						<div class="bar-title">绩效扣罚(本月)</div>
						<div class="text">{{perPen}}</div>
					</div>
				</div>
				<div style="overflow-y: auto; height: calc(100% - 200px);width: calc(100% - 20px); margin: 0 auto;">
					<div ref="list" style="width: 100%" :style="{height: listHeight}"></div>
				</div>
			</div>
			<div class="container_right">
				<div class="right_top">
					<div class="right_title">{{jixiaozonge_title}}</div>
					<div ref="jixiaozonge" style="height: calc(100% - 50px); width: 100%;"></div>
				</div>
				<div class="bottom-right right" v-show="menzhenshoushushow">
					<div class="right_title">奖励型绩效</div>
					<div class="square_choose">
						<span>奖励型绩效：</span>
						<span>{{perRewardBing}}</span>
						<span>元</span>
						<span @click="chooseNavClick('奖励性同期')" :class="{active: !haotong}">同期</span>
						<span @click="chooseNavClick('奖励性本月')" :class="{active: haotong}">本月</span>
					</div>
					<div ref="jianglixing" style="height: 75%; width: 100%;"></div>
				</div>
				<div class="bottom-right">
					<div class="right_title">医联体绩效</div>
					<div class="square_choose">
						<span>医联体绩效：</span>
						<span>{{perUnitBing}}</span>
						<span>元</span>
						<span @click="chooseNavClick('医联体同期')" :class="{active: !ylt}">同期</span>
						<span @click="chooseNavClick('医联体本月')" :class="{active: ylt}">本月</span>
					</div>
					<div ref="yilianti" style="height: 75%; width: 100%;"></div>
				</div>				
			</div>
		</div>
	</div>
</template>
<script>
import echarts from 'echarts'
import axios from 'axios'
export default {
	data () {
		return {
			type: this.$route.params.type,
			heightClient: '0px',
			listHeight: '0px',
			menzhenshoushushow: true,
			outHover: false,
			averageHover: false,
			useHover: false,
			otherHover: false,
			//门急诊情况
			ylt: true,
			a: true,
			typeValue: 'perTotalNum',
			haotong: true,
			menBarTitle1: '',
			fontover: false,
			menBarTitle2: '',
			menBarTitle3: '',
			outShow: true,
			lastShow: false,
			averageShow: false,
			useShow: false,
			jixiaozonge_title: "绩效总额趋势",
			perRewardUnitMedNumThisMonth: "", //药品节约本月
			perRewardUnitMonthNumThisMonth: "", //月绩效本月
			perRewardUnitSurNumThisMonth: "", //手术绩效本月
			perRewardUnitNurNumThisMonth: "",//护理损耗本月
			perRewardUnitMedNumSamePeriod: "", //药品节约同期
			perRewardUnitMonthNumSamePeriod: "", //月绩效同期
			perRewardUnitSurNumSamePeriod: "", //手术绩效同期
			perRewardUnitNurNumSamePeriod: "", //护理损耗同期
			//bar
			perPen: "", //绩效扣罚
			perUnit: '', //奖励型绩效
			perReward: '', //医联体绩效
			perRewardThisMonth: "", //奖励型绩效本月
			perTotalNum: "", //绩效总额
			perRewardBing: '',//奖励型绩效饼图
			perUnitBing: "",//医联体绩效饼图
			perUnitThisMonth: "", //医联体绩效本月
			perUnitSamePeriod: "", //医联体绩效同期
			perRewardSamePeriod: "", //奖励型绩效同期
			//医联体绩效图表
			bhHosPerThisMonth: "", //滨海医院本月
			hbHosPerThisMonth: "", //湖滨社区本月
			unitKongPerThisMonth: "", //空港医院本月
			peaceHosPerThisMonth: "", //和平医联体本月
			bhHosPerSamePeriod: "", //滨海医院同期
			hbHosPerSamePeriod: "", //湖滨社区同期
			unitKongPerSamePeriod: "", //空港医院同期
			peaceHosPerSamePeriod: "", //和平医联体同期
			perRewardUnitThisMonth: [],
			perRewardUnitSamePeriod: [],
			options_depIds: [],
			perTotalRate: '',
			options: {
		    	tooltip: {
			        trigger: 'axis',
			        enterable:true,
			    },
		    // axisPointer: {
		    //         show: false
		    //     },
			    legend: {
			        data: ['本月', '同期'],
			        itemWidth: 28,
			        itemHeight: 10
			    },
			    grid: {
			        left: '0%',
			        right: '15%',
			        bottom: '3%',
			        top: '30px',
			        containLabel: true
			    },
			    xAxis: [{
			        type: 'value',
			        // boundaryGap: [0, 0.01],
			        show: false
			    },{
			        type: 'value',
			        // boundaryGap: [0, 0.01],
			        show: false
			    }],
			    yAxis: [{
			        type: 'category',
			        data: [],
			        nameGap: '100',
			        boundaryGap: true,
			        axisLine: {
			        	show: false
			        },
			        axisTick: {
			        	show: false,
			        	length: 100
			        },
			        axisLabel: {
			        	interval: 0,
			        	formatter:function(params){
				        	var newParamsName = "";// 最终拼接成的字符串
						    var paramsNameNumber = params.length;// 实际标签的个数
						    var provideNumber = 8;// 每行能显示的字的个数
						    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
						    /**
						     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
						     */
						    // 条件等同于rowNumber>1
						    if (paramsNameNumber > provideNumber) {
						        /** 循环每一行,p表示行 */
						        for (var p = 0; p < rowNumber; p++) {
						            var tempStr = "";// 表示每一次截取的字符串
						            var start = p * provideNumber;// 开始截取的位置
						            var end = start + provideNumber;// 结束截取的位置
						            // 此处特殊处理最后一行的索引值
						            if (p == rowNumber - 1) {
						                // 最后一次不换行
						                tempStr = params.substring(start, paramsNameNumber);
						            } else {
						                // 每一次拼接字符串并换行
						                tempStr = params.substring(start, end) + "\n";
						            }
						            newParamsName += tempStr;// 最终拼成的字符串
						        }

						    } else {
						        // 将旧标签的值赋给新标签
						        newParamsName = params;
						    }
						    //将最终的字符串返回
						    return newParamsName
				        }
			        }

			    },{
					type: "category",
			        data: [],
			        nameGap: '100',
			        boundaryGap: true,
			        show: false,
			    }],
			    series: [

			        {
			            name: '本月',
			            type: 'bar',
			            barWidth: 20,
			            data: [],
			            // legendHoverLink: false,
			            label: {
			            	show: true,
			            	position: 'right',
			            	color: '#333',
			            	formatter: function(params) {
				            		return Number(params.value).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
				            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#4C91DA'
			            	}
			            },
			            itemStyle: {
			            	normal: {
			            		color: '#89B1DC'
			            	}
			            }
			        },
			        {
			            name: '同期',
			            type: 'bar',
			            barWidth: 20,
			            data: [],
			            label: {
			            	show: true,
			            	position: 'right',
			            	color: '#9B9B9B',
			            	formatter: function(params) {
				            		return Number(params.value).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
				            	}
			            },
			            emphasis: {
			            	itemStyle: {
			            		color: '#FFC93E'
			            	}
			            },
			            itemStyle: {
			            	normal: {
			            		color: '#E8E8E8'
			            	}
			            }
			        },
			        {	
			        	xAxisIndex: 1,
						yAxisIndex: 1,
			            type: 'bar',
			            barWidth: 20,
			            data: [],
			            itemStyle: {
							normal: {
							barBorderColor: 'transparent',
							color: 'transparent'
							}
	        			}		
			            
			        }
			    ]
		  },
		  optionsJianglixing: {

			    tooltip : {
			        trigger: 'item',
			        formatter: "{b} : {c} <br>占比：{d}%"
			    },
			    grid: {
			    	top: '5%',
			    	left: '5%',
			    	right: '5%',
			    	bottom: '20%'
			    },
			    legend: {
			        orient: 'vertical',
			        // top: 'middle',
			        bottom: 30,
			        //left: 'right',
			        itemWidth: 10,
			        align: 'right',
			        right: 10,
			        data: [
			        	{
			        		icon: 'circle',
			        	}, 
			        	{
			        		icon: 'circle',
			        	},
			        	{
			        		icon: 'circle',
			        	},
			        	{
			        		icon: 'circle'
			        	},
			        	{
			        		icon: 'circle'
			        	},
			        	{
			        		icon: 'circle',
			        	}, 
			        	{
			        		icon: 'circle',
			        	},
			        	{
			        		icon: 'circle',
			        	},
			        	{
			        		icon: 'circle'
			        	},
			        	{
			        		icon: 'circle'
			        	}
			        ]
			    },
			    series : [
			        {
			            type: 'pie',
			            radius : '70%',
			            center: ['50%', '43%'],
			            selectedMode: 'single',
			            label: {
			            	show: false
			            },
			            data:[
			            	{
			                	value: 0,
			                    itemStyle: {
			                    	color: '#B0A8DE'
			                    }
			                },
			                {	
			                	value: 0,
			                    itemStyle: {
			                    	color: '#72B8EF'
			                    }
			                },
			                {	
			                	value: 0,
			                    itemStyle: {
			                    	color: '#95DE83 '
			                    }
			                },
			                {	
			                	value: 0,
			                    itemStyle: {
			                    	color: '#CFDF87'
			                    }
			                },
			                {
			                	value: 0,
			                    itemStyle: {
			                    	color: '#F29898'
			                    }
			                },
			                {
			                	value: 0,
			                    itemStyle: {
			                    	color: '#91AFEC'
			                    }
			                },
			                {	
			                	value: 0,
			                    itemStyle: {
			                    	color: '#92CF9F'
			                    }
			                },
			                {
			                	value: 0,
			                    itemStyle: {
			                    	color: '#E8D352'
			                    }
			                },
			                {
			                	value: 0,
			                    itemStyle: {
			                    	color: '#F3BA8B'
			                    }
			                },
			                
			                {
			                	value: 0,
			                    itemStyle: {
			                    	color: '#63C2C6'
			                    }
			                }
			            ],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			},
			optionsYilianti: {

			    tooltip : {
			        trigger: 'item',
			        formatter: "{b} : {c} <br>占比：{d}%"
			    },
			    grid: {
			    	top: '5%',
			    	left: '5%',
			    	right: '5%',
			    	bottom: '20%'
			    },
			    legend: {
			        orient: 'vertical',
			        // top: 'middle',
			        bottom: 30,
			        //left: 'right',
			        itemWidth: 10,
			        align: 'right',
			        right: 10,
			        data: [
			        	{
			        		icon: 'circle',
			        		name: '医联体滨海'
			        	},
			        	{
			        		icon: 'circle',
			        		name: '医联体湖滨'
			        	},
			        	{
			        		icon: 'circle',
			        		name: '空港绩效'
			        	}, 
			        	{
			        		icon: 'circle',
			        		name: '医联体社区'
			        	}
			        ]
			    },
			    series : [
			        {
			            type: 'pie',
			            radius : '70%',
			            center: ['50%', '43%'],
			            selectedMode: 'single',
			            label: {
			            	show: false
			            },
			            data:[
			                {
			                    name: '医联体滨海',
			                    itemStyle: {
			                    	color: '#B0A8DE'
			                    }
			                },
			                {
			                	name: '医联体湖滨',
			                    itemStyle: {
			                    	color: '#91AFEC'
			                    }
			                },
			                {
			                	name: '空港绩效',
			                    itemStyle: {
			                    	color: '#63C2C6'
			                    }
			                },
			                
			                {
			                	name: '医联体社区',
			                    itemStyle: {
			                    	color: '#CFDF87'
			                    }
			                }
			            ],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			},
			optionsJixiaozonge: {
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
	                show: false
	            },
		    },
		    grid: {
		    	top: '15%',
		    	right: '3%',
		    	bottom: '15%',
		    	left: '8%'
		    },
		    legend: {
		    	itemWidth: 12,
		    	top: '3%',
		        data:[
		        	{
		        		icon: 'circle',
		        		name: '本月'
		        	},
		        	{
		        		icon: 'circle',
		        		name: '同期'
		        	}
		        ]
		    },
		    xAxis: [
		        {
		            type: 'category',
		            data: [],
		            
		            axisTick: {
		            	show: false
		            },
		            axisLine: {
		            	show: false
		            }
		        }
		    ],
		    yAxis: 
		        {
		            type: 'value',
		            axisLabel: {
		                formatter: function(value) {
		                	if (parseInt(value) > 1000) {
		                		return parseInt(value)/1000 + 'K'
		                	} else 
		                	return value
		                }
		            },
		            axisTick: {
		            	show: false
		            },
		            axisLine: {
		            	show: false
		            },
		            splitLine: {
		            	lineStyle: {
		            		color: '#E6E6E6',
		            		type: 'dashed'
		            	}
		            }
		        },
		    series: [
		        {
		            name:'本月',
		            type:'bar',
		            barWidth: 21,
		            data:[],
		            itemStyle: {
		            	normal: {
		            		color: '#89B1DC'
		            	}
		            },
		            emphasis: {
		            	itemStyle: {
		            		color: '#4C91DA'
		            	}
		            }
		        },
		        {
		            name:'同期',
		            type:'line',
		            symbolSize: 10,
		            data:[2.0, 2.2, 3.3, 4.5],
		            itemStyle: {
		            	normal: {
		            		color: '#FBC05A'
		            	}
		            }
		        }
		    ] 
		  }
		}
	},
	// created () {

	// },
	methods: {
		backClick () {
			this.$router.push('/all')
		},
		number(data) {
  			if(data != null) {
  				return data.toString().replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')
  			} else {
  				return
  			}
  		},
  		barMouseLeave(type) {
			if (type === 'out') {
				if(this.outHover === false) {
					this.outShow = false	
				}
			} else if (type === 'average') {
				if(this.averageHover === false) {
				this.averageShow = false
				
		}
				
			} else if(type === 'use'){
				if(this.useHover === false) {
				
				{this.useShow = false}
		}
				
			} else if(type === 'last') {
				if(this.otherHover === false) {
				{this.lastShow = false}
		}
			}	
		},
		barMouseEnter(type) {
			if (type === 'out') {
				if(this.outHover === false) {
					if(this.outShow === false)
					{this.outShow = true}
					
				}
			} else if (type === 'average') {
				if(this.averageHover === false) {
				if(this.averageShow === false)
				{this.averageShow = true}
				
		}
				
			} else if(type === 'use'){
				if(this.useHover === false) {
				if(this.useShow === false)
				{this.useShow = true}
				
		}
				
			} else if(type === 'last') {
				if(this.otherHover === false) {
				if(this.lastShow === false)
				{this.lastShow = true}
				
		}
			}	
		},
		chooseNavClick (type) {
			this.optionsYilianti.series[0].data[0].value = ''
			this.optionsYilianti.series[0].data[1].value = ''
			this.optionsYilianti.series[0].data[2].value = ''
			this.optionsYilianti.series[0].data[3].value = ''
			var self = this
			switch (type) {
				case '奖励性本月': 
					this.haotong = true
					this.perRewardBing = this.perRewardThisMonth
					let jianglixingObj = {

	              		tooltip : {
				        trigger: 'item',
				        formatter: "{b} : {c} <br>占比：{d}%"
					    },
					    legend: {
					        orient: 'vertical',
					        // top: 'middle',
					        bottom: 30,
					        //left: 'right',
					        itemWidth: 10,
					        align: 'right',
					        right: 10,
					        data: [
					        ]
					    },
					    series : [
					        {
					            type: 'pie',
					            radius : '70%',
					            center: ['50%', '43%'],
					            selectedMode: 'single',
					            label: {
					            	show: false
					            },
					            data:[],
					            itemStyle: {
					                emphasis: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
					                }
					            }
					        }
					    ]
					}
					jianglixingObj.series[0].data = []
	              	self.perRewardUnitThisMonth.xData.forEach((item, index) => {
	              		jianglixingObj.series[0].data.push(self.optionsJianglixing.series[0].data[index])
	              		jianglixingObj.legend.data.push(self.optionsJianglixing.legend.data[index])
	              		jianglixingObj.legend.data[index].name = item
	              		jianglixingObj.series[0].data[index].name = item
	              	})
	              	self.perRewardUnitThisMonth.yData.forEach((item, index) => {
	              		jianglixingObj.series[0].data[index].value = item

	              	})
	              	self.myChart1 = echarts.init(self.$refs.jianglixing)
					self.myChart1.setOption(jianglixingObj)
					break;
				case '奖励性同期': 
					this.haotong = false
					this.perRewardBing = this.perRewardSamePeriod
					// this.f()
					let jianglixingObjs = {

	              		tooltip : {
				        trigger: 'item',
				        formatter: "{b} : {c} <br>占比：{d}%"
					    },
					    legend: {
					        orient: 'vertical',
					        // top: 'middle',
					        bottom: 30,
					        //left: 'right',
					        itemWidth: 10,
					        align: 'right',
					        right: 10,
					        data: [
					        ]
					    },
					    series : [
					        {
					            type: 'pie',
					            radius : '70%',
					            center: ['50%', '43%'],
					            selectedMode: 'single',
					            label: {
					            	show: false
					            },
					            data:[],
					            itemStyle: {
					                emphasis: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
					                }
					            }
					        }
					    ]
					}
					jianglixingObjs.series[0].data = []
	              	self.perRewardUnitSamePeriod.xData.forEach((item, index) => {
	              		jianglixingObjs.series[0].data.push(self.optionsJianglixing.series[0].data[index])
	              		jianglixingObjs.legend.data.push(self.optionsJianglixing.legend.data[index])
	              		jianglixingObjs.legend.data[index].name = item
	              		jianglixingObjs.series[0].data[index].name = item
	              	})
	              	self.perRewardUnitSamePeriod.yData.forEach((item, index) => {
	              		jianglixingObjs.series[0].data[index].value = item

	              	})
	              	self.myChart1 = echarts.init(self.$refs.jianglixing)
					self.myChart1.setOption(jianglixingObjs)
					break;
				case '医联体本月':
					this.ylt = true
					this.perUnitBing = this.perUnitThisMonth
					this.optionsYilianti.series[0].data[0].value = this.bhHosPerThisMonth
					this.optionsYilianti.series[0].data[1].value = this.hbHosPerThisMonth
					this.optionsYilianti.series[0].data[2].value = this.unitKongPerThisMonth
					this.optionsYilianti.series[0].data[3].value = this.peaceHosPerThisMonth
					this.myChart2 = echarts.init(this.$refs.yilianti)
					this.myChart2.setOption(this.optionsYilianti)
					break;
				case '医联体同期':
					this.ylt = false
					this.perUnitBing =this.perUnitSamePeriod
					this.optionsYilianti.series[0].data[0].value = this.bhHosPerSamePeriod
					this.optionsYilianti.series[0].data[1].value = this.hbHosPerSamePeriod
					this.optionsYilianti.series[0].data[2].value = this.unitKongPerSamePeriod
					this.optionsYilianti.series[0].data[3].value = this.peaceHosPerSamePeriod
					this.myChart2 = echarts.init(this.$refs.yilianti)
					this.myChart2.setOption(this.optionsYilianti)
					break;
				default: 
					break;
			}
 		},
		barClick (type) {
			this.outShow = false
			this.averageShow = false
			this.useShow = false
			this.lastShow = false
			this.outHover = false
			this.averageHover = false
			this.useHover = false
			this.otherHover = false
			this.options.series[0].data = []
			this.options.series[1].data = []
			this.options.series[2].data = []
			this.options.yAxis[0].data = []
			if (type === 'out') {
				this.outShow = true
				this.outHover = true
				this.typeValue = 'perTotalNum'
				this.f()
				this.myChart = echarts.init(this.$refs.list)
				this.myChart.setOption(this.options)
			} else if (type === 'average') {
				this.averageShow = true
				this.averageHover = true
				this.typeValue = 'perReward'
				this.f()
				this.myChart = echarts.init(this.$refs.list)
				this.myChart.setOption(this.options)
			} else if (type === 'use'){
				this.useShow = true
				this.useHover = true
				this.typeValue = 'perUnit'
				this.f()
				this.myChart = echarts.init(this.$refs.list)
				this.myChart.setOption(this.options)
			} else {
				this.lastShow = true
				this.otherHover = true
				this.typeValue = 'perPen'
				this.f()
				this.myChart = echarts.init(this.$refs.list)
				this.myChart.setOption(this.options)
			}
		},
	  refresh (isBtnRefresh) {      
	      
	    domMessage.innerHTML = '';  
		},
		nav_click (type) {

			type === 'money' ? this.$router.push('/income') : type === 'business' ? this.$router.push('/all') : this.$router.push('/jixiaoall')
		},
		//列表数据
 		f () {
 			// alert(this.month)
          var qs = require('qs');
          var self = this
          
          axios.post('/service', qs.stringify({"data": JSON.stringify({
              command: 'performanceOverview',
              platform: 'web',
              monthTime: self.month,
              type: self.typeValue
             })}), {
              headers: {
               "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              }
             })
             .then(function (rep) {
              if (rep.data.statusCode === '10001') {
              	// console.log(self.options)
              	//绩效总额趋势图表
              	
              	if(self.typeValue === 'perTotalNum') {
              		self.jixiaozonge_title = '绩效总额趋势'
              	} else if(self.typeValue === 'perReward') {
              		self.jixiaozonge_title = '奖励型绩效趋势'
              	} else if(self.typeValue === 'perUnit') {
              		self.jixiaozonge_title = '医联体绩效趋势'
              	} else if(self.typeValue === 'perPen') {
              		self.jixiaozonge_title = '绩效扣罚趋势'
              	}
              	self.optionsJixiaozonge.xAxis[0].data = []
              	self.optionsJixiaozonge.series[0].data = []
              	self.optionsJixiaozonge.series[1].data = []
              	rep.data.data.perMonthHos.thisMonth.monthTrend.xData.forEach((item) => {
              		self.optionsJixiaozonge.xAxis[0].data.push(item)
              	})
              	rep.data.data.perMonthHos.thisMonth.monthTrend.yData.forEach((item) => {
              		self.optionsJixiaozonge.series[0].data.push(item)
              	})
              	rep.data.data.perMonthHos.samePeriod.monthTrend.yData.forEach((item) => {
              		self.optionsJixiaozonge.series[1].data.push(item)
              	})
              	self.myChart3 = echarts.init(self.$refs.jixiaozonge)
				self.myChart3.setOption(self.optionsJixiaozonge)

				self.options.yAxis[0].data = []
				self.options.series[0].data = []
				self.options.series[1].data = []
				self.options.series[2].data = []
              	rep.data.data.perMonthHos.thisMonth.departmentTrend.xData.forEach((item) => {
              		self.options.yAxis[0].data.push(item)
              	})
              	rep.data.data.perMonthHos.thisMonth.departmentTrend.yData.forEach((item) => {
              		self.options.series[0].data.push(item)
              	})
              	rep.data.data.perMonthHos.samePeriod.departmentTrend.yData.forEach((item) => {
              		self.options.series[1].data.push(item)
              	})
              	self.options_depIds = rep.data.data.perMonthHos.thisMonth.departmentTrend.depIds
              	self.listHeight = parseInt(self.options.yAxis[0].data.length)*75 + 'px'
      			for (var i = 0 ; i < self.options.yAxis[0].data.length; i++ ) {
      				self.options.series[2].data.push(1000)
      			}
      			setTimeout(() => self.myChart.resize(), 0);
              	self.myChart = echarts.init(self.$refs.list)
				self.myChart.setOption(self.options)

              	var info = rep.data.data.perMonthHos.thisMonth.info
              	var infos = rep.data.data.perMonthHos.samePeriod.info
              	//奖励型绩效图表
              	let jianglixingObj = {

              		tooltip : {
			        trigger: 'item',
			        formatter: "{b} : {c} <br>占比：{d}%"
				    },
				    legend: {
				        orient: 'vertical',
				        // top: 'middle',
				        bottom: 30,
				        //left: 'right',
				        itemWidth: 10,
				        align: 'right',
				        right: 10,
				        data: [
				        ]
				    },
				    series : [
				        {
				            type: 'pie',
				            radius : '70%',
				            center: ['50%', '43%'],
				            selectedMode: 'single',
				            label: {
				            	show: false
				            },
				            data:[],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				}
				jianglixingObj.series[0].data = []
              	self.perRewardUnitThisMonth =  rep.data.data.perMonthHos.thisMonth.perRewardUnit
              	self.perRewardUnitSamePeriod = rep.data.data.perMonthHos.samePeriod.perRewardUnit
              	self.perRewardUnitThisMonth.xData.forEach((item, index) => {
              		jianglixingObj.series[0].data.push(self.optionsJianglixing.series[0].data[index])
              		jianglixingObj.legend.data.push(self.optionsJianglixing.legend.data[index])
              		jianglixingObj.legend.data[index].name = item
              		jianglixingObj.series[0].data[index].name = item
              	})
              	self.perRewardUnitThisMonth.yData.forEach((item, index) => {
              		jianglixingObj.series[0].data[index].value = item

              	})
              	self.myChart1 = echarts.init(self.$refs.jianglixing)
				self.myChart1.setOption(jianglixingObj)
				
				self.perPen = self.number(Number(info.perPen)) //绩效扣罚
				self.perRewardThisMonth = self.number(Number(info.perReward)) //奖励型绩效本月
				self.perTotalNum = self.number(Number(info.perTotalNum)) //绩效总额
				self.perTotalRate = info.perTotalRate
				self.perUnitThisMonth = self.number(Number(info.perUnit)) //医联体绩效本月
				self.perUnit = self.perUnitThisMonth
				self.perUnitBing = self.perUnitThisMonth
				self.perReward = self.perRewardThisMonth
				self.perRewardBing = self.perRewardThisMonth
				self.perUnitSamePeriod = self.number(Number(infos.perUnit)) //医联体绩效同期
				self.perRewardSamePeriod = self.number(Number(infos.perReward)) //奖励型绩效同期

				//医联体绩效图表
				self.bhHosPerThisMonth = info.bhHosPer //滨海医院本月
				self.hbHosPerThisMonth = info.hbHosPer //湖滨社区本月
				self.unitKongPerThisMonth = info.unitKongPer //空港医院本月
				self.peaceHosPerThisMonth = info.peaceHosPer //和平医联体本月

				self.optionsYilianti.series[0].data[0].value = self.bhHosPerThisMonth
				self.optionsYilianti.series[0].data[1].value = self.hbHosPerThisMonth
				self.optionsYilianti.series[0].data[2].value = self.unitKongPerThisMonth
				self.optionsYilianti.series[0].data[3].value = self.peaceHosPerThisMonth
				self.myChart2 = echarts.init(self.$refs.yilianti)
				self.myChart2.setOption(self.optionsYilianti)

				self.bhHosPerSamePeriod = infos.bhHosPer //滨海医院同期
				self.hbHosPerSamePeriod = infos.hbHosPer //湖滨社区同期
				self.unitKongPerSamePeriod = infos.unitKongPer //空港医院同期
				self.peaceHosPerSamePeriod = infos.peaceHosPer //和平医联体同期
              } else if (rep.data.statusCode === '10003'){
              	 
              	 self.$router.push('/login')
              }
             }).catch(function (error) {
              // console.log(error);
             })
 		}
	},
	mounted () {
		
		this.myChart = echarts.init(this.$refs.list)
		this.myChart.setOption(this.options)
		var self = this
		//bar的点击事件
		this.myChart.on("click", function (params) {
		var length = self.options.yAxis[0].data.length
		var qs = require('qs')
		var myChart = echarts.init(self.$refs.list)
		var depId = self.options_depIds[params.dataIndex] + ''
		var index = params.dataIndex
  		for(var i = 0 ; i < self.options.yAxis[0].data.length ; i++){
	           	if(self.options.series[0].data[i].value){
	                self.options.series[0].data[i] = self.options.series[0].data[i].value;
	            }
	            if(self.options.series[1].data[i].value){
	                self.options.series[1].data[i] = self.options.series[1].data[i].value;
	            }
	        if(index == i){
	            self.options.series[0].data[i] = {
	                value : self.options.series[0].data[i],
	                itemStyle:{
	                    normal:{
	                        color : '#4C91DA'
	                    }
	                }
	            }
	            self.options.series[1].data[i] = {
	                value : self.options.series[1].data[i],
	                itemStyle:{
	                    normal:{
	                        color : '#FFC93E'
	                    }
	                }
	            }
	        }
	    }
	  	
	  		
		myChart.setOption(self.options)
		axios.post('/service', qs.stringify({"data": JSON.stringify({
		        command: 'perMonthDepLinkage',
		        platform: 'web',
		        monthTime: self.month,
		        depId: depId,
		        type: self.typeValue
	        	})
			}), {
              headers: {
               "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              }
	    }).then(function (rep) {
				if (rep.data.statusCode === '10001') {
					self.haotong = true
					self.ylt = true
	              	self.optionsJixiaozonge.xAxis[0].data = []
	              	self.optionsJixiaozonge.series[0].data = []
	              	self.optionsJixiaozonge.series[1].data = []
	              	rep.data.data.perMonthDep.thisMonth.monthTrend.xData.forEach((item) => {
	              		self.optionsJixiaozonge.xAxis[0].data.push(item)
	              	})
	              	rep.data.data.perMonthDep.thisMonth.monthTrend.yData.forEach((item) => {
	              		self.optionsJixiaozonge.series[0].data.push(item)
	              	})
	              	rep.data.data.perMonthDep.samePeriod.monthTrend.yData.forEach((item) => {
	              		self.optionsJixiaozonge.series[1].data.push(item)
	              	})

	              	self.myChart3 = echarts.init(self.$refs.jixiaozonge)
					self.myChart3.setOption(self.optionsJixiaozonge)

	              	var info = rep.data.data.perMonthDep.thisMonth.info
	              	var infos = rep.data.data.perMonthDep.samePeriod.info
	              	//奖励型绩效图表本月

	              	let jianglixingObj = {
	              		tooltip : {
				        trigger: 'item',
				        formatter: "{b} : {c} <br>占比：{d}%"
					    },
					    legend: {
					        orient: 'vertical',
					        // top: 'middle',
					        bottom: 30,
					        //left: 'right',
					        itemWidth: 10,
					        align: 'right',
					        right: 10,
					        data: [
					        ]
					    },
					    series : [
					        {
					            type: 'pie',
					            radius : '70%',
					            center: ['50%', '43%'],
					            selectedMode: 'single',
					            label: {
					            	show: false
					            },
					            data:[],
					            itemStyle: {
					                emphasis: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
					                }
					            }
					        }
					    ]
					}
					jianglixingObj.series[0].data = []
	              	self.perRewardUnitThisMonth =  rep.data.data.perMonthDep.thisMonth.perRewardUnit
	              	self.perRewardUnitSamePeriod = rep.data.data.perMonthDep.samePeriod.perRewardUnit
	              	self.perRewardUnitThisMonth.xData.forEach((item, index) => {
	              		jianglixingObj.series[0].data.push(self.optionsJianglixing.series[0].data[index])
	              		jianglixingObj.legend.data.push(self.optionsJianglixing.legend.data[index])
	              		jianglixingObj.legend.data[index].name = item
	              		jianglixingObj.series[0].data[index].name = item
	              	})
	              	self.perRewardUnitThisMonth.yData.forEach((item, index) => {
	              		jianglixingObj.series[0].data[index].value = item

	              	})
	              	self.myChart1 = echarts.init(self.$refs.jianglixing)
					self.myChart1.setOption(jianglixingObj)
					self.perRewardBing = self.number(rep.data.data.perMonthDep.thisMonth.info.perReward)
					// self.perPen = info.perPen //绩效扣罚
					self.perRewardThisMonth = self.number(info.perReward) //奖励型绩效本月
					// self.perTotalNum = info.perTotalNum //绩效总额
					// self.perTotalRate = info.perTotalRate
					self.perUnitBing = self.number(info.perUnit)
					self.perUnitThisMonth = self.number(info.perUnit) //医联体绩效本月
					// self.perUnit = self.number(self.perUnitThisMonth)
					// self.perReward = self.perRewardThisMonth
					
					self.perUnitSamePeriod = self.number(infos.perUnit) //医联体绩效同期
					self.perRewardSamePeriod = self.number(infos.perReward) //奖励型绩效同期

					//医联体绩效图表
					self.bhHosPerThisMonth = info.bhHosPer //滨海医院本月
					self.hbHosPerThisMonth = info.hbHosPer //湖滨社区本月
					self.unitKongPerThisMonth = info.unitKongPer //空港医院本月
					self.peaceHosPerThisMonth = info.peaceHosPer //和平医联体本月

					self.optionsYilianti.series[0].data[0].value = self.bhHosPerThisMonth
					self.optionsYilianti.series[0].data[1].value = self.hbHosPerThisMonth
					self.optionsYilianti.series[0].data[2].value = self.unitKongPerThisMonth
					self.optionsYilianti.series[0].data[3].value = self.peaceHosPerThisMonth
					self.myChart2 = echarts.init(self.$refs.yilianti)
					self.myChart2.setOption(self.optionsYilianti)

					self.bhHosPerSamePeriod = infos.bhHosPer //滨海医院同期
					self.hbHosPerSamePeriod = infos.hbHosPer //湖滨社区同期
					self.unitKongPerSamePeriod = infos.unitKongPer //空港医院同期
					self.peaceHosPerSamePeriod = infos.peaceHosPer //和平医联体同期
	              }
	             }).catch(function (error) {
	              // console.log(error);
	             })
			
	  	})
	},
	created () {
		// alert(this.month)
		this.heightClient = document.body.clientHeight - 170 + 'px'
		this.a = false
		this.a = true
		this.outHover = true
		// this.month = '2018-01'
		this.f()
	},
	props: ['month'],
	watch: {
		month (newV, oldV) {
			this.month = newV
			this.haotong = true
			this.ylt = true
			this.f()
		}
	}
}
</script>
<style lang="scss" scoped>
	header {
		width: 100%;
		background: #fff;
		height: 63px;
		display: flex;
		justify-content: center;
		ul{
			height: 63px;
			// margin-left: 30%;
			li {
				float: left;
				line-height: 63px;
				width: 140px;
				text-align: center;
				font-size: 17px;
				color: #646464;
				cursor: pointer;
				&:hover {
					color: #1EA0DD;
				}
			}
		}
		.isActive{
			color: #0385C1 !important;
		}
	}
	.detail_container{
		// min-height: 850px;
		background: #f8f8f8;
		padding: 1.4%;

		.side_choose{
			width: 39%;
			background: #fff;
			margin-right: 1%;
			height: 98%;
			float: left;
			box-shadow: 0 2px 8px 0 rgba(0,0,0,0.17);
			.choose_bar{
				height: 155px;
				padding-left: 2%;
				padding-right: 2%;
				width: 96%;
				.active{
					background: #4C91DA  !important;
					box-shadow: 0 2px 12px 0 rgba(76,145,218,0.31);
					color: #fff !important;
					.text{
						color: #fff !important;
					}
				}
				.bar{
					width: 22%;
					padding: 10px 1%;
					height: 67px;
					line-height: 20px;
					margin-top: 34px;
					border-radius: 5px;
					background: #f1f1f1;
					float: left;
					margin-right: 1%;
					cursor: pointer;
					font-size: 13px;
					font-family: "微软雅黑";
					color: #787878;
					.text{
						font-size: 16px;
						font-family: "微软雅黑";
						// line-height: 40px;
						color: #4D4D4D;
						span{
							font-family: "微软雅黑";
							font-size: 12px;
							// color: #
						}
					}
				}
				.bar:last-child{
					margin-right: 0;
				}
			}
		}
		.container_right{
			float: left;
			width: 60%;
			height: 100%;
			.koufa {
				width: 30%;
				float: left;
				background: #fff;
				height: 40%;
				ul{
					display: flex;
					padding: 5px 0;
					text-align: center;
					li{
						width: 33%;
						border-right: 1px solid #ccc;
						span:first-child{
							font-size: 22px;
							line-height: 30px;
							color: #4D4D4D; 
						}
						span:last-child{
							font-size: 12px;
							color: #9B9B9B;
						}
					}
					li:last-child{
						border-right: 0px !important;
					}
				}
			}
			.koutwo{
				ul {
					li {
						width: 49.5% !important;
					}
				}
			}
			.right_title{
				height: 43px;
				line-height: 43px;
				padding-left: 22px;
				font-size: 17px;
				color: #4D4D4D;
				border-bottom: 1px solid #ddd;
				.smtitle{
					font-size: 14px;
					color: #9B9B9B;
				}
			}
			.right_content{
				display: flex;
				width: 100%;
				align-items: center;
				justify-content: center;
				height: calc(100% - 45px);
				ul{
					width: 70%;
					height: 150px;
					align-items: center;
					justify-content: center;
					li{
						height: 40px;
						line-height: 40px;
						margin-top: 10px;
						color: #787878;
						span{
							font-size: 24px;
							color: #4D4D4D;
							display: inline-block;
						}
					}
				}
			}
			.right_top{
				background: #fff;
				box-shadow: 0 2px 8px 0 rgba(0,0,0,0.17);
			}
			.right_top, .right_bottom{
				height: 48%;
				margin-bottom: 30px;
			}
		}
		.bottom-left, .bottom-right{
					width: 48%;
					background: #fff;
					height: calc(50% - 30px);
					box-shadow: 0 2px 8px 0 rgba(0,0,0,0.17);
					float: left;
					margin-right: 4%;
					.jizhendata{
						width: 92%;
						display: block;
						margin: 0 auto;
						height: 20%;
						margin-top: 10px;
						li{
							width: 33%;
							height: 100%;
							float: left;
							text-align: center;
							border-right: 1px solid #eee;
							font-size: 16px;
							color: #9B9B9B;
							span:nth-child(1) {
								font-size: 20px;
								color: #4D4D4D;
								line-height: 35px;
							}
						}
						li:last-child{
							border-right: none;
						}
					}
				}
				.bottom-right{
					margin-right: 0;
					.haocai{
						display: flex;
						padding: 10px 0 ;
						li{
							width: 49.5%;
							// height: 20%;
							text-align: center;
							border-right: 1px solid #ccc;
							span:first-child{
								font-size: 25px;
								color: #4D4D4D;
								line-height: 30px;
							}
							span:last-child{
								font-size: 16px;
								color: #9B9B9B;
							}
						}
						li:last-child{
							border-right: 0px;
						}
					}

					.right-small, .right-big{
						background: #fff;
					}
					.right-small{
						height: 50%;
						margin-bottom: 15px;
						.right_all{
							width: 100%;
							height: calc(100% - 43px);
							display: flex;
							align-items: center;
							justify-content: center;
							ul {
								width: 90%;
								height: 60px;
								display: flex;
								align-items: center;
							justify-content: center;
							// padding-left: 1%;
								li{
									width: 33%;
									text-align: left;
									span:first-child{
										font-size: 24px;
										color: #4D4D4D;
									}
									span:last-child{
										color: #9B9B9B;
										line-height: 25px;
										display: inline-block;
									}
								}
								li:last-child{
									width: 32%;
								}
								li:first-child{
									margin-left: 2%;
								}
							}
						}
					}
					.right-big{
						height: 65%;
						.bingchuang{
							width: 80%;
							display: block;
							margin: 0 auto;
							margin-top: 5%;
							li{
								height: 40px;
								color: #6A6A6A;
								font-size: 14px;
								span:nth-child(1){
									display: inline-block;
									width: 160px;
								}
								span:last-child{
									font-size: 25px;
									color: #4D4D4D;
								}
							}
						}
					}
					.right_nav{
						height: 20%;
						width: 90%;
						margin: 0 auto;
						display: block;
						li{
							float: left;
							width: 49%;
							height: 100%;
							text-align: center;
							border-right: 1px solid #eee;
							color:#4D4D4D;
							font-size: 20px;
							margin-top: 7px;
							margin-bottom: 7px;
							span:nth-child(1){
								color: #9B9B9B;
								font-size: 14px;
								line-height: 25px;
							}
						}
						li:last-child{
							border-right: none;
						}
					}
					.special{
						li{
							width: 33%;
						}
					}
				}
				.right{
					margin-right: 4%;
					margin-bottom: 20px;
				}
	}
	.square_choose{
			margin-top: 10px;
			// padding-bottom: 20px;
			height: 13%;
			padding-left: 30px;
			font-size: 14px;
			color: #646464;
			margin-right: 20px;
			margin-top: 20px;
			span{
				font-family: "微软雅黑";
				display: inline-block;
			}
			span:nth-child(2){
				font-size: 18px;
			}
			span:nth-child(4), span:nth-child(5) {
				float: right;
				width: 40px;
				height: 22px;
				line-height: 22px;
				color: #fff;
				text-align: center;
				cursor: pointer;
				background: #C1BFBF;
				&:hover {
					background: #63A5DF;
				}
			}
			.active {
				background: #418ED2  !important;
			}
		}
</style>